<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
    <style>
        body {
            width: 100%;
            height: 1000px;
        }

        .box {
            padding-top: 200px;
        }

        h3 {
            text-align: center;
            font-size: 22px;
            height: 46px;
            width: 420px;
            margin: 0 auto;
            margin-bottom: 15px;
            line-height: 46px;
            color: transparent;
            background-image: linear-gradient(to right, #82ffbc, #fe112e, #ff56cb, #ffbebc, yellow, orange, red, orange, yellow, green, yellow, orange, red);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: ColorMove 30s infinite linear;
        }

        td {
            text-align: center;
        }

        td > button {
            margin: 0 15px;
        }
        @keyframes ColorMove {
            0% {
                background-position: -530px 0;
            }
            100% {
                background-position: 0 0;
            }
        }

    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <h3 id="show-board"></h3>
        <table class="table table-striped table-bordered table-hover">
            <tr>
                <td>Id</td>
                <td>userName</td>
                <td>tel</td>
                <td>相关操作</td>
            </tr>
            <tbody>
            {{each result}}
            <tr>
                <td>{{$value.id}}</td>
                <td>{{$value.username}}</td>
                <td>{{$value.tel}}
                </td>
                <td>
                    <a href="/delete?id={{ $value.id}}" class="btn btn-danger">删除</a>
                    <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal">添加</button>
                    <a class="btn btn-info" href="/fix?id={{ $value.id}}">修改</a>
                </td>
            </tr>
            {{/each}}
            </tbody>
        </table>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="AddForm">
                        <div class="form-group">
                            <label for="id">Id</label>
                            <input type="number" class="form-control" name="id" id="id" placeholder="id" required>
                        </div>
                        <div class="form-group">
                            <label for="username">username</label>
                            <input type="search" class="form-control" id="username" name="username"
                                   placeholder="username" required>
                        </div>
                        <div class="form-group">
                            <label for="tel">telephone</label>
                            <input type="search" name="tel" id="tel" class="form-control" placeholder="telephone"
                                   required>
                        </div>

                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                        </div>
                        <button type="reset" class="btn btn-outline-info">重置</button>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="input-group" style="width: 60%;">
        <input id="input1" type="text" class="form-control" placeholder="search：" aria-describedby="basic-addon1" autofocus>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <ul class="list-group listAll" style="margin-top: 15px">
                <table class="table table-striped table-bordered table-hover searchtable">

                </table>
            </ul>
        </div>
    </div>

    <div class="input-group" style="width: 60%;">
        <input id="input3" type="text" class="form-control" placeholder="根据姓名查找:" >
    </div>

    <div class="panel panel-primary">
        <div class="panel-body">
            <ul class="list-group listAll" style="margin-top: 15px">
                <table class="table table-striped table-bordered table-hover searchtablebyname">

                </table>
            </ul>
        </div>
    </div>

    <script src="/jquery/dist/jquery.js"></script>
    <script src="/canvas-nest.js/dist/canvas-nest.js"></script>
    <script src="/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/js/printer.js"></script>
    <script>
        let str = '数据库大作业( bootstrap+ node.js + mysql)\n';
        Printer.init(str, {
            selector: 'show-board'
        }).print();
    </script>
    <script>
        $(function () {
            $('#AddForm').on('submit', function (e) {
                e.preventDefault()
                let formDate = $(this).serialize()
                $.ajax({
                    url: '/add',
                    type: 'post',
                    data: formDate,
                    dataType: 'json',
                }).then((data) => {
                    window.location.reload();
                })
            })
        })

        $("#input1").bind("input propertychange", function (event) {
            $.ajax({
                url: '/search',
                type: 'post',
                data: {"value": $("#input1").val()},
                dataType: 'json',
            }).then((data) => {
                // console.log(data.message)
                data = data.message
                let html = `<tr>
                        <td>id</td>
                        <td>userName</td>
                        <td>tel</td>
                    </tr>`
                for (let i in data) {
                    html += `<tr>
                <td>${data[i].id}</td>
                <td>${data[i].username}</td>
                <td>${data[i].tel}</td>
                </tr>`
                }
                $('.searchtable').html(html)
            })
        });


        $("#input3").bind("input propertychange", function (event) {
            $.ajax({
                url: '/searchbyname',
                type: 'post',
                data: {"value": $("#input3").val()},
                dataType: 'json',
            }).then((data) => {
                // console.log(data.message)
                data = data.message
                let html = `<tr>
                        <td>id</td>
                        <td>userName</td>
                        <td>tel</td>
                        <td>hobby</td>
                        <td>sex</td>
                        <td>age</td>
                    </tr>`
                for (let i in data) {
                    html += `<tr>
                <td>${data[i].id}</td>
                <td>${data[i].username}</td>
                <td>${data[i].tel}</td>
                <td>${data[i].hobby}</td>
                <td>${data[i].sex}</td>
                <td>${data[i].age}</td>
                </tr>`
                }
                $('.searchtablebyname').html(html)
            })
        });
    </script>
</body>
</html>
